<!-- 活动 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetActivityListApi">
            <template #isOpen="{ row }">
                <div class="balanceType"
                    :style="{ color: balanceTypeObj[row.isOpen].color, backgroundColor: balanceTypeObj[row.isOpen].bgk }">
                    {{ balanceTypeObj[row.isOpen].text }}
                </div>
            </template>
            <template #belongFlag="{ row }">
                {{ belongFlagType[row.belongFlag] }}
            </template>
            <template #action="{ row }">
                <el-button v-if="!row.pick" @click="pickFn(row)">选择</el-button>
                <el-button v-else @click="reverseFn(row)" type="primary">选中</el-button>
            </template>
        </PageTable>
    </el-card>
</template>

<script setup>

import { reactive, ref, defineComponent, defineExpose } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { GetActivityListApi } from "@/api/Banner";

const balanceTypeObj = {
    true: {
        text: '已开启',
        color: '#67C23A',
        bgk: '#E1F3D8',

    },
    false: {
        text: '未开启',
        color: '#409EFF',
        bgk: '#ECF5FF',
    },
    3: {
        text: '已结束',
        color: '#F56C6C',
        bgk: '#FDE2E2',
    },
}

defineComponent({
    components: {
        FormTable,
        PageTable
    }
})

const parameter = reactive({
    activityTitle: null,
    belongFlag: null,
    isRecommend: null
})


const formList = ref([
    {
        type: 'input',
        label: '活动名称',
        code: 'activityTitle',
    },

    {
        type: 'select',
        label: '活动玩法',
        options: [
            { label: '无限盲盒', value: 1 },
            { label: '一番赏盲盒', value: 2 },
            { label: '爆团', value: 3 },
        ],
        code: 'belongFlag',
    },
    {
        type: 'select',
        label: '活动状态',
        options: [
            { label: '已开启', value: 1 },
            { label: '未开启', value: 0 },
        ],
        code: 'isRecommend',
    },
])
const belongFlagType = {
    1: '无限盲盒',
    2: '一番赏盲盒',
    3: '爆团'
}
const column = [
    { label: '活动名称', prop: 'activityTitle' },
    { label: '活动玩法', slots: 'belongFlag' },
    { label: '开启时间', prop: 'startTime' },
    { label: '结束时间', prop: 'endTime' },
    { label: '活动状态', slots: 'isOpen' },
    { label: '操作', slots: 'action' },

]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.username = null
    parameter.activityTitle = null
    parameter.belongFlag = null
    parameter.isRecommend = null
    tableRef.value.refresh(true)
}

const Pickid = ref()
const type = 3
//选中
function pickFn(row) {
    Pickid.value = row.boxId
    row.pick = true
}
//反选
function reverseFn(row) {
    Pickid.value = ''
    row.pick = false
}

defineExpose({ Pickid, type })


</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>